<template>
  <div id="page-help-center">
    <div class="list_breadcrumb">位置：帮助列表</div>
    <div class="list_center">
      <ul v-if="this.listShow">
        <li @click="goDetail(item.id)" v-for="(item, index) in this.listData" :key="index">
          <span class="help_title">{{ item.title }}</span>
          <span class="help_time">{{ item.createTime.substring(0, 10) }}</span>
        </li>
      </ul>
      <!-- 用户无消息 -->
      <div v-else class="no_news">没有消息</div>
      <el-pagination
        @current-change="handleCurrentChange"
        class="paging"
        background
        layout="prev, pager, next"
        :total="this.listDotal"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "helpCenter",
  data() {
    return {
      listDotal: 0,
      listShow: true,
      listData: ""
    };
  },
  methods: {
    // 获取列表信息
    helpListData(data) {
      this.$request.helpList(data).then(res => {
        console.log(res);
        if (res.status == 200) {
          console.log(this.listDotal);
          this.listDotal = res.data.total;
          this.listDotal == 0
            ? (this.listShow = false)
            : (this.listShow = true);
          this.listData = res.data.list;
        }
      }, err => {
        console.log(err);
        this.requestFail(err);
      });
    },
    goDetail(id) {
      this.$router.push({name: "personal-help-detail", query: {id: id}});
    },
    // 翻页
    handleCurrentChange(val) {
      console.log(val);
      let listData = {
        page: val,
        size: 10
      };
      this.getNoticeData(listData);
    }
  },
  created() {
  },
  mounted() {
    let listData = {
      page: 1,
      size: 10
    };
    this.helpListData(listData);
  }
};
</script>

<style scoped>
.list_breadcrumb {
  width: 100%;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 2px;
  color: #252627;
  background: #ffffff;
  line-height: 58px;
  padding-left: 20px;
}

.list_center {
  width: 100%;
  margin-top: 10px;
  background: #ffffff;
  overflow: hidden;
}

.list_center li {
  border-bottom: solid 1px #e6e6e6;
  cursor: pointer;
}

.list_center li .help_title {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #252627;
  display: inline-block;
  padding-left: 22px;
  line-height: 78px;
  width: 745px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  vertical-align: middle;
}

.list_center li .help_time {
  vertical-align: middle;
  float: right;
  padding-right: 22px;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 78px;
  letter-spacing: 0px;
  color: #888888;
}

.list_center li:hover {
  background: #ececec;
}

.paging {
  float: right;
  margin: 26px 20px 60px 0;
}
</style>
